import { useEffect, useState } from 'react'
import { Divider } from 'antd-mobile'
import PieChart from '../../../../components/PieChart'
import RadarChart from '../../../../components/RadarChart'
import LotteryBall from '../../../../components/LotteryBall'
import { useStore4Analysis, useStore4Tabs, useStore4SortFiveData, useStore4SevenStarData } from '../../../../store'
import { TAB_KEY_SORT_FIVE, TAB_KEY_SEVEN_STAR } from '../../../../constants/index'
import { getFourNumbers } from '../../../../data/sortFiveUtils'

import './index.less'

const BIG_LIST = [5, 6, 7, 8, 9]
const SMALL_LIST = [0, 1, 2, 3, 4]
const ODD_LIST = [1, 3, 5, 7, 9]
const EVEN_LIST = [0, 2, 4, 6, 8]
const PRIME_LIST = [1, 2, 3, 5, 7]
const COMPOSITE_LIST = [0, 4, 6, 8, 9]

function NumberOfTimes() {

  const key = useStore4Tabs(state => state.key)
  const sortFiveData = useStore4SortFiveData(state => state.sortFiveData)
  const sevenStarData = useStore4SevenStarData(state => state.sevenStarData)
  const periodCount = useStore4Analysis(state => state.periodCount)

  // 大小
  const [numBigSmall, setNumBigSmall] = useState([[], [], [], []])
  // 奇偶
  const [numOddEven, setNumOddEven] = useState([[], [], [], []])
  // 质合
  const [numPrimeComposite, setNumPrimeComposite] = useState([[], [], [], []])
  // 出现次数
  const [numCount, setNumCount] = useState([[], [], [], []])
  // 重复次数
  const [repeatCount, setRepeatCount] = useState([[], [], [], []])

  useEffect(() => {

    let list = []

    if (key == TAB_KEY_SORT_FIVE) { // 排列五
      list = sortFiveData.list.slice(0, periodCount)
    }
    if (key == TAB_KEY_SEVEN_STAR) { // 七星彩
      list = sevenStarData.list.slice(0, periodCount)
    }

    // 大小
    const tmpBigSmall = Array(4).fill(null).map(_ => ([{ name: '大', count: 0, }, { name: '小', count: 0 }]))
    // 奇偶
    const tmpOddEven = Array(4).fill(null).map(_ => ([{ name: '奇', count: 0, }, { name: '偶', count: 0 }]))
    // 质合
    const tmpPrimeComposite = Array(4).fill(null).map(_ => ([{ name: '质', count: 0, }, { name: '合', count: 0 }]))
    // 出现次数
    const tmpCount = Array(4).fill(null).map(_ => ([{ name: '0', count: 0, }, { name: '1', count: 0 }, { name: '2', count: 0 }, { name: '3', count: 0 }, { name: '4', count: 0 }, { name: '5', count: 0 }, { name: '6', count: 0 }, { name: '7', count: 0 }, { name: '8', count: 0 }, { name: '9', count: 0 }]))
    // 重复次数
    const tmpRepeatCount = Array(4).fill(null).map(_ => ({}))

    list.map(item => {
      const numbers = getFourNumbers(item.lotteryDrawResult)
      numbers.map((num, index) => {

        if (BIG_LIST.includes(num)) { // 大
          tmpBigSmall[index][0].count++
        } else if (SMALL_LIST.includes(num)) { // 小
          tmpBigSmall[index][1].count++
        }

        if (ODD_LIST.includes(num)) { // 奇
          tmpOddEven[index][0].count++
        } else if (EVEN_LIST.includes(num)) { // 偶
          tmpOddEven[index][1].count++
        }

        if (PRIME_LIST.includes(num)) { // 质
          tmpPrimeComposite[index][0].count++
        } else if (COMPOSITE_LIST.includes(num)) { // 合
          tmpPrimeComposite[index][1].count++
        }

        // 计数
        tmpCount[index][num].count++

      })

      // 定位重复
      if (item.repeatIndexArray && item.repeatIndexArray.length > 0) {
        item.repeatIndexArray.forEach(repeatIndex => { // 重复的索引
          const repeatNum = numbers[repeatIndex] // 重复的数字
          if (!tmpRepeatCount[repeatIndex][repeatNum]) {
            tmpRepeatCount[repeatIndex][repeatNum] = 1
          }
          else {
            tmpRepeatCount[repeatIndex][repeatNum]++
          }
        })
      }
    })

    setNumBigSmall(tmpBigSmall)
    setNumOddEven(tmpOddEven)
    setNumPrimeComposite(tmpPrimeComposite)
    setNumCount(tmpCount)
    setRepeatCount(tmpRepeatCount)
  }, [key, periodCount])

  return (
    <>
      <div className='number-container'>
        <table className='number-table'>
          <thead>
            <tr>
              <th>千位</th>
              <th>百位</th>
              <th>十位</th>
              <th>个位</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              {
                Array(4).fill(null).map((_, index) => (
                  <td key={`pie_column_${index}`}>
                    <div><PieChart data={numBigSmall[index]} colors={['#1890FF', '#13C2C2']} /></div>
                    <div><PieChart data={numOddEven[index]} colors={['#2FC25B', '#FACC14']} /></div>
                    <div><PieChart data={numPrimeComposite[index]} colors={['#F04864', '#8543E0']} /></div>
                  </td>
                ))
              }
            </tr>
            <tr>
              {
                Array(4).fill(null).map((_, index) => (
                  <td key={`radar_column_${index}`}>
                    <RadarChart data={numCount[index]} />
                  </td>
                ))
              }
            </tr>
            <tr>
              {
                Array(4).fill(null).map((_, index) => (
                  <td key={`repeat_column_${index}`}>
                    {
                      Object.keys(repeatCount[index]).map(key => (
                        <div key={`repeat_column_${index}_${key}`} className='repeat-item'><LotteryBall>{key}</LotteryBall>重<span className='repeat-count'>{repeatCount[index][key]}</span>次</div>
                      ))
                    }
                  </td>
                ))
              }
            </tr>
          </tbody>
        </table>
      </div>
    </>
  )
}

export default NumberOfTimes